{include file="public/header,public/nav,public/fixbar" title="<?php echo $info['name']?>-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        {if $question_names}
        <div class="layui-main margin-bottom-10">
            <div class="layui-row">
                <!-- 分类 -->
                <div class="goods-category-select">
                    <div class="category-list rich-text-content">
                        <div id="second-category">
                            {foreach $question_names as $v}
                            <a class="layui-btn layui-btn-primary second-category {if $info.id == $v.id} layui-this {/if}" href="javascript:;" data-id="{$v.id}">{$v.sub_title}</a>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {/if}
        <div class="layui-col-space15">
            <!-- 章节练习 -->
            <div class="layui-col-xs12 layui-col-md7 layui-col-lg8">
                <div class="layui-main">
                    <div class="zent-block-header block-header margin-bottom-0">
                        <div class="zent-block-header__title zent-block-header__title-ribbon">
                            <span class="layui-font-16 font-weight-bold">章节练习</span>
                        </div>
                        <div class="layui-btn layui-btn-primary layui-btn-sm practice-set" user-login>
                            <i class="layui-icon layui-icon-set"></i> 刷题设置
                        </div>
                    </div>
                    <div class="layui-row scrollbar" style="height: 687.47px;">
                        <div class="layui-collapse course-catalog chapter-list" lay-filter="filter-collapse" id="chapter-list" lay-accordion>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md5 layui-col-lg4">
                <div class="layui-main">
                    <div class="layui-row">
                        <div class="layui-font-16 margin-bottom-15 font-weight-bold">
                            <i class="layui-icon layui-icon-fire layui-font-16 padding-right-5 layui-font-red"></i>
                            热门题库
                        </div>
                        <div class="layui-col-space15">
                            {foreach $question_list as $v}
                            <div class="layui-col-xs12 article-li">
                                <a href="{$v.href}">
                                    <div class="layui-card">
                                        <div class="layui-card-body">
                                            <div class="item">
                                                <img src="{$v.head_imgs}" class="user-course-img">
                                                <div class="detail">
                                                    <div class="product-title layui-ellips">
                                                        <span class="item-title-label">{$v.product_type_text}</span>{$v.name}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-card-footer">
                                            <p class="text">已有 <b>{$v.virtual_sales+$v.real_sales}</b> 人学习</p>
                                            {if $v.sale_price == 0}
                                            <p class="product-price layui-font-16">免费</p>
                                            {else}
                                            <p class="product-price layui-font-16"><span class="symbol">￥</span>{$v.sale_price}</p>
                                            {/if}
                                        </div>
                                    </div>
                                </a>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
            {if $info.recommend_list}
            <div class="layui-col-xs12">
                <div class="layui-main">
                    <div class="layui-row">
                        <div class="layui-font-16 margin-bottom-15 font-weight-bold">
                            <i class="layui-icon layui-icon-fire layui-font-16 padding-right-5 layui-font-red"></i>
                            实物精选
                        </div>
                        <div class="layui-col-space25">
                            {foreach $info.recommend_list as $v}
                            <div class="layui-col-xs12 layui-col-md4">
                                <a href="{$v.href}">
                                    <div class="layui-card product-item">
                                        <div class="layui-card-body">
                                            <div class="item">
                                                {if $v.product_type == 1}
                                                <img src="{$v.head_imgs}" class="user-goods-img">
                                                {elseif $v.product_type == 10}
                                                <div class="justify-content-center">
                                                    <img style="background-color: {$v.background_color};margin-right: 0px;" src="{$v.head_imgs}" class="user-goods-img">
                                                    <span class="exam-sub-title">{$v.sub_title}</span>
                                                </div>
                                                {else}
                                                <img src="{$v.head_imgs}" class="user-course-img">
                                                {/if}
                                                <div class="detail">
                                                    <div class="product-title layui-ellipss">
                                                        <span class="item-title-label">{$v.product_type_text}</span>{$v.name}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-card-footer">
                                            <p class="text">已售 <b>{$v.virtual_sales+$v.real_sales}</b></p>
                                            {if $v.sale_price == 0}
                                            <p class="product-price layui-font-16">免费</p>
                                            {else}
                                            <p class="product-price layui-font-16"><span class="symbol">￥</span>{$v.sale_price}</p>
                                            {/if}
                                        </div>
                                    </div>
                                </a>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
            {/if}
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['layer', 'flow', 'element'], function(){
        var $ = layui.jquery, flow = layui.flow, element = layui.element;

        // 绑定自定义的 tab 元素
        element.tab({
            headerElem: '#second-category>.layui-btn',
        });

        var product_id = "{$info.id}";
        var href = "{$info.href}";
        $(function(){
            loadList(product_id);  // 加载列表
        })

        $(document).on('click','.second-category',function(){
            product_id = $(this).data('id');
            location.href="/question/chapter_detail?id="+product_id
        });

        // 分页加载列表
        function loadList(product_id=''){
            var limit = 10;//每次请求的条数
            flow.load({
                elem: '#chapter-list' //指定列表容器
                ,scrollElem: '.scrollbar'//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'product_id':product_id},//请求的页码和每页显示条数
                        url: '/question/get_chapters',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                if (res.data.length > 0) {
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                        var newHref = href+'&chapter_id='+item.id;
                                        var resetBtn = '';
                                        if (item.practice_number == item.qnumber) {
                                            resetBtn = `<span class="layui-btn layui-btn-primary layui-btn-sm reset" data-chapter_id="${item.id}">重 置</span>`
                                        }
                                        if (item.children.length > 0) {
                                            var children = '';
                                            layui.each(item.children, function(key, val){
                                                newHref = href + '&chapter_id='+val.id;
                                                var childrenReset = '';
                                                if (val.practice_number == val.qnumber) {
                                                    childrenReset = `<span class="layui-btn layui-btn-primary layui-btn-sm reset" data-chapter_id="${val.id}">重 置</span>`
                                                }
                                                children += `<div class="space-between chapter-item">
                                                                <div class="margin-right-15">${val.name}</div>
                                                                <div class="align-items-center">
                                                                    <p class="correct-rate text margin-right-15">
                                                                        <span class="margin-right-30">
                                                                            已练：<span class="layui-font-success">${val.practice_number}</span><span lay-separator="" style="margin: 0px 10px;color:#ddd;">/</span>${val.qnumber}
                                                                        </span>
                                                                        ${childrenReset}
                                                                    </p>
                                                                    <a href="${newHref}" class="outer-circle">
                                                                        <i class="iconfont icon-bianji layui-font-14 layui-font-gray font-weight-bold"></i>
                                                                    </a>
                                                                </div>
                                                            </div>`;
                                            })
                                            newsHtml += `<div class="layui-colla-item">
                                                            <div class="layui-colla-title">
                                                                <div class="space-between">
                                                                    <div class="margin-right-15">${item.name}</div>
                                                                    <div class="align-items-center">
                                                                        <p class="correct-rate text margin-right-15">
                                                                            <span class="margin-right-30">
                                                                                已练：<span class="layui-font-success">${item.practice_number}</span><span lay-separator="" style="margin: 0px 10px;color:#ddd;">/</span>${item.qnumber}
                                                                            </span>
                                                                            ${resetBtn}
                                                                        </p>
                                                                        <a href="${newHref}" class="outer-circle">
                                                                            <i class="iconfont icon-bianji layui-font-14 layui-font-gray font-weight-bold"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="layui-colla-content">
                                                                ${children}
                                                            </div>
                                                        </div>`;
                                        } else {
                                            newsHtml += `<div class="layui-colla-item">
                                                            <div class="space-between chapter-item">
                                                                <div class="margin-right-15">${item.name}</div>
                                                                <div class="align-items-center">
                                                                    <p class="correct-rate text margin-right-15">
                                                                        <span class="margin-right-30">
                                                                            已练：<span class="layui-font-success">${item.practice_number}</span><span lay-separator="" style="margin: 0px 10px;color:#ddd;">/</span>${item.qnumber}
                                                                        </span>
                                                                        ${resetBtn}
                                                                    </p>
                                                                    <a href="${newHref}" class="outer-circle">
                                                                        <i class="iconfont icon-bianji layui-font-14 layui-font-gray font-weight-bold"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>`;
                                        }
                                        
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    // 初始化所有折叠面板
                                    element.render('collapse', 'filter-collapse');
                                } else {
                                    $('#chapter-list').html('<div class="layui-empty"><img src="/static/images/nodata/no_question_bank.png"><p>暂无章节数据~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }

        // 刷题设置
        $(".practice-set").click(function(){
            var user_id = "{:session('user.id')}";
            if (user_id) {
                var index = layer.open({
                    skin: 'layui-layer-radius', // 弹窗主题样式
                    offset: 'auto',
                    title: '刷题设置',
                    type: 2,
                    anim: 'slideUp',
                    shade: 0.3,
                    shadeClose: true,
                    area: ['650px', '610px'],
                    content: '/question/practice_set'
                });
                var device = layui.device('mobile');
                if (device.mobile) {
                    layer.full(index);
                }
            }
        })

        // 练题量重置清零
        $(document).on('click', '.reset',function(){
            var chapter_id = $(this).data('chapter_id');
            layer.confirm('确定将该章节的练题量重置吗？重置后可从头练习', {
                skin: 'layui-layer-radius', // 弹窗主题样式
                title : '操作确认',
            },function(index){
                var loading = layer.msg('数据处理中..', {icon: 16,shade: 0.3,time: false});
                $.ajax({
                    url:'/question/reset_chapter_process',
                    type:'post',
                    data:{"chapter_id":chapter_id},
                    dataType:"JSON",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success:function(res){
                        layer.close(loading);  //返回数据关闭loading
                        if(res.code == 0){
                            layer.msg(res.msg,{icon: 1,time:1500},function(){
                                location.reload();
                            })
                        } else{
                            layer.msg(res.msg,{icon: 2});
                        }
                    },
                    error:function(e){
                        layer.close(loading);
                        layer.msg('请求失败'+e.responseText,{icon: 2});
                    },
                });
            });
        })
    });
</script>